<template>
  <div>
    
      <section class="main isPc">
        
        <banner :bannerList="bannerList"></banner>
        
        <section class="message">
          <p class="p1">温馨提示</p>
          <div class="p2">
            <p>每日送货时间</p>
            <p>下午：14：00-16：00</p>
            <p>晚上：20：00-22：00</p>
          </div>
          <div class="p3">
            <p>满20镑即可免费配送.</p>
            <p>支付方式：货到付款,现金,微信,支付宝三种方式.</p>
          </div>
        </section>

        <section class="hotList">
          <h2 class="title">特价商品</h2>
          <ul>
            <li v-for="(item,index) in prcList" v-if="index<8">
              <div v-if="item.goods_number==0" class="prcNone">
                <p>售罄</p>
              </div>
              <a target="_blank" :href="'/prcShow?id='+item.id" >
                <img v-lazy="item.goods_logo">
                <p class="title">{{item.goods_name}}</p>
                <p class="price">£{{item.goods_price|price}}</p>
              </a>
            </li>
          </ul>
        </section>

        <section class="itemList">
          <div class="sTitle">
            <p class="zh">当红分类</p>
            <p class="cn">Hot Classification</p>
          </div>

          <itemList v-if="typeImg" :img="typeImg[0].zone_logo" zone="10,44,45,85" :date="type.typeA"></itemList>
          
          <itemList v-if="typeImg" :img="typeImg[1].zone_logo" zone="21,22,23,24,25,26,27,28,31,81,82,83,84" :date="type.typeB"></itemList>

          <itemList v-if="typeImg" :img="typeImg[2].zone_logo" zone="12,13,14,15,47,48,49,50,51,52,53,54,55" :date="type.typeC"></itemList>

        </section>
      </section>

    <section class="mainWap isWap">
        <section class="bannerWap">
          <swiper :aspect-ratio="300/800">
            <swiper-item class="swiper-demo-img" :key="item.id" v-for="item in bannerList"><img :src="item.ad_logo"></swiper-item>
          </swiper>
        </section>

        <section class="messageWap">
          <p class="p1">温馨提示</p>
          <div class="p2">
            <p>每日送货时间</p>
            <p>下午：14：00-16：00</p>
            <p>晚上：20：00-22：00</p>
          </div>
          <div class="p3">
            <p>满20镑即可免费配送.</p>
            <p>支付方式：货到付款,现金,微信,支付宝三种方式.</p>
          </div>
        </section>

        <section class="hotListWap">
          <h2 class="title wapTitle">今日最HOT</h2>
          <ul>
            <li v-for="(item,index) in prcList" :key="" v-if="index<6">
              <div v-if="item.goods_number==0" class="prcNoneWap">
                <p>售罄</p>
              </div>
              <div class="wapBuy">
                <span class="spanA" @click="wapCartOpen"></span>
                <p class="wapBuyOn"><span class="spanB" @click="PostCart(item)"></span><input v-model="wapBuyNum" type="text" name=""></p>
              </div>
              <a target="_blank" :href="'/prcShow?id='+item.id" >
                <img v-lazy="item.goods_logo">
                <p class="title">{{item.goods_name}}</p>
                <p class="price">£{{item.goods_price|price}}</p>
              </a>
            </li>
          </ul>
        </section>

        <section class="itemListWap">
          <h2 class="title wapTitle">当红分类</h2>
          <p class="txtleWap"><span class="itemA"></span>即食食品</p>
          <itemList v-if="typeImg" :img="typeImg[0].zone_logo" zone="16,17,18,56,57,58,59,60,61,62,63" :date="type.typeA"></itemList>
          <p class="txtleWap"><span class="itemB"></span>冷冻食品</p>
          <itemList v-if="typeImg" :img="typeImg[1].zone_logo" zone="11,42" :date="type.typeB"></itemList>
          <p class="txtleWap"><span class="itemC"></span>调味品</p>
          <itemList v-if="typeImg" :img="typeImg[2].zone_logo" zone="19,20,35,64,65,66,67,68,69,70" :date="type.typeC"></itemList>

        </section>

    </section>
  </div>
</template>

<script>
import { Swiper, SwiperItem} from 'vux'
import {Get,Post} from '@/config/api.js'
import banner from '@/components/banner.vue'
import itemList from '@/components/list.vue'

import $ from 'jquery'
export default {
  name: 'Home',
  data () {
    return {
      bannerList: [],
      swiperItemIndex: 1,
      loadStart:false,
      prcList:[],//商品数据
      prcLoad:true,//判断是否在加载中
      prcNum:10,//加载数量
      allNum:'',//商品总数量
      loadShow:false,//加载中
      noMore:false,//没有更新商品
      type:{
        typeA:'',
        typeB:'',
        typeC:''
      },
      typeImg:'',
      wapBuyNum:1 //购买商品数量
    }
  },
  filters:{
    price(val){
      let arr=val.toString().split(".")
      if(arr.length>1){
        let len=arr[1].length
        if(len==1){
          return val+'0'
        }else{
          return val
        }
      }else{
        return val+'.00'
      }
    }
  },
  components:{
    Swiper, SwiperItem,banner,itemList,banner
  },
  mounted(){
      this.getBanner()
      this.getType()//地区商品
      this.getTypeImg()//地区商品图片
      this.getData()
      this.menu()
      window.addEventListener('scroll', this.menu)
      this.$store.dispatch("isLoading",false)


      $(document).on('click','.spanA',function(){ 
        $('.wapBuyOn').removeClass('on')
        $('.wapBuy').removeClass('on')
        $(this).parent('.wapBuy').addClass('on')
        $(this).next('p').addClass('on')
      })

      $(document).on('click','.spanB',function(){ 
        $('.wapBuyOn').removeClass('on')
        $('.wapBuy').removeClass('on')
      })

      $(window).bind( 'orientationchange', function(e){
        console.log(window.orientation)
        console.log('变化了')
      });

  },
  beforeDestroy(){
    this.$store.dispatch("headerOut");
  },
  methods:{
    //滚动判断document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    menu() {
      this.scroll = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      this.wh=document.documentElement.offsetHeight || window.pageYOffset || document.body.offsetHeight;
      this.headerH=this.wh-this.scroll+17
      if(this.headerH<550){
        this.$store.dispatch("headerH",'550');
      }else{
        this.$store.dispatch("headerH",this.headerH);
      }
      
     },
    //获取地区商品
    async getType(){
      if(this.vCheck()){
        let regA=await Get('/goods?_include=category,goods_zone,goods_image,goods_describe&is_sale=1&is_recommend=1&_sort=-updated_at&category_id=10,44,45,85&page=1',this.$store.state.token)
        this.type.typeA=regA.data
        let regB=await Get('/goods?_include=category,goods_zone,goods_image,goods_describe&is_sale=1&_sort=-updated_at&is_recommend=1&category_id=21,22,23,24,25,26,27,28,31,81,82,83,84&page=1',this.$store.state.token)
        this.type.typeB=regB.data
        let regC=await Get('/goods?_include=category,goods_zone,goods_image,goods_describe&is_sale=1&_sort=-updated_at&is_recommend=1&category_id=12,13,14,15,47,48,49,50,51,52,53,54,55&page=1',this.$store.state.token)
        this.type.typeC=regC.data
      }
    },
    //获取地区商品图片
    async getTypeImg(){
      if(this.vCheck()){
        let reg=await Get('/goods/zone?_sort=id',this.$store.state.token)
        this.typeImg=reg.data
      }
    },
    //获取商品
    async getData(){
      let reg=await Get('/goods?is_hot=1&is_sale=1',this.$store.state.token)
      this.prcList=reg.data
    },
    //获取banner图片
    async getBanner(){

      if(this.vCheck()){
        this.$store.dispatch("isLoading",true)
        let reg=await Get('/ads',this.$store.state.token)
        this.bannerList=reg.data
        this.$store.dispatch("isLoading",false)
      }
    },
    //更新购物车信息
    async getNowWap(){
      let reg=await Get('/carts?_sort=id&_pagination=false',this.$store.state.token)
        let all=0
        for(let i=0;i<reg.data.length;i++){
          all+=reg.data[i].amount
        }
        let data={
          num:reg.data.length,
          price:all
        }
        this.$store.dispatch("wapCart",data)
    },
    //加入购物车
    async PostCart(val){
      if(this.vLogin()){
        if(this.wapBuyNum<=val.goods_number){
          let date={
            "goods_id":val.id,
            "goods_count":this.wapBuyNum
          }
          this.$store.dispatch("isLoading",true)
          await Post('/carts',this.$store.state.token,date)
          this.$store.dispatch("isLoading",false)
          alert('加入成功！')
          this.getNowWap()
        }else{
          alert('商品库存不足')
          this.wapBuyNum=val.goods_number
        }
          
      }else{
        this.$router.push({ path: '/login'})
      }
    },
    wapCartOpen(){
      this.wapBuyNum=1
    },
      
      //加载更多
    loadMore(){
        if(this.prcNum<this.allNum){
          this.prcNum+=10
        }else{
          this.noMore=true
          this.loadShow=false
        }
        
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css">
  @import url("//unpkg.com/element-ui@1.4.3/lib/theme-default/index.css");
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }

</style>
